<template>
  <div class="demo-use-slots">
    <input id="hasHead" type="checkbox" v-model="hasHead">
    <label for="hasHead">hasHead</label>
    <input id="hasFoot" type="checkbox" v-model="hasFoot">
    <label for="hasFoot">hasFoot</label>

    <demo-use-slots-component>
      <template #head v-if="hasHead">
        <h2>自定义头部插槽内容</h2>
      </template>
      <template #foot v-if="hasFoot">
        <h2>自定义底部插槽内容</h2>
      </template>
      <button>自定义默认插槽内容</button>
    </demo-use-slots-component>
  </div>
</template>

<script>

import {DemoUseSlotsComponent} from "./demo-use-slots-component";

export default {
  name: "demo-use-slots",
  components: {DemoUseSlotsComponent},
  data() {
    return {
      hasHead: true,
      hasFoot: true,
    }
  },
}
</script>

<style lang="scss">
.demo-use-slots-component {
  &.demo-use-slots-component-has-slot-head {
    .demo-use-slots-component-head {
      background-color: #4caf50;
      color: white;
    }
  }
}
</style>
